<template>
  <div class="fixed inset-0 bg-black/60 bg-opacity-50 flex items-center justify-center z-50">
    <div class="bg-white rounded-lg w-[480px] shadow-xl">
      <div class="p-6">
        <div class="flex justify-between items-center mb-6">
          <h3 class="text-xl font-medium">添加职位分类</h3>
          <button @click="$emit('close')" class="text-gray-400 hover:text-gray-600">
            <i class="ri-close-line text-xl"></i>
          </button>
        </div>
        
        <input 
          v-model="categoryName"
          type="text" 
          class="w-full px-4 py-2 border border-gray-200 rounded mb-4 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" 
          placeholder="请输入分类名称"
          @keyup.enter="addCategory"
        >
        
        <div class="mb-6">
          <div class="text-sm text-gray-500 mb-2">热门分类推荐：</div>
          <div class="flex flex-wrap gap-2">
            <button 
              v-for="suggestion in suggestions"
              :key="suggestion"
              @click="categoryName = suggestion"
              class="px-3 py-1 text-sm bg-gray-50 hover:bg-gray-100 text-gray-600 rounded-full"
            >
              {{ suggestion }}
            </button>
          </div>
        </div>
        
        <div class="flex justify-end space-x-3">
          <button 
            @click="$emit('close')"
            class="px-4 py-2 border border-gray-200 text-gray-600 hover:bg-gray-50 rounded-lg"
          >
            取消
          </button>
          <button 
            @click="addCategory"
            :disabled="!categoryName.trim()"
            class="px-4 py-2 bg-blue-600 text-white hover:bg-blue-700 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"
          >
            确认添加
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const emit = defineEmits<{
  close: []
  add: [categoryName: string]
}>()

const categoryName = ref('')
const suggestions = ['产品经理', 'UI 设计师', '前端开发', '运营总监', '市场营销']

const addCategory = () => {
  if (categoryName.value.trim()) {
    emit('add', categoryName.value.trim())
  }
}
</script>
